<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="主页demo/js/jquery-3.6.0.min.js"></script>
		<script src="./js/layui/layui.js"></script>
		<link rel="stylesheet" href="./js/layui/css/layui.css" />
		<link rel="stylesheet"  href="css/base.css"/>
		<style>
			body,html{
				width: 100%;
				
			}
			.main{
				width:100px;
				border: 1px solid red;
			}
			.line{
				width: 2px;
				border: 1px solid red;
				height: 50px;
				margin: 0 auto;
			}
			.content{
				width: 100px;
				height: 100px;
				background-color: yellow;
			}
		
		</style>
	</head>
	<body>
		<div class="main">
			<div class="line"></div>
			<div class="content"></div>
		</div>
		
		
		
		<script>
			$(function(){
				
				$(".content").hover(function(){
					$(this).siblings().css({
						"transition":"all 0.3s ease-in-out",
						"height":"80px"
					})
				},function(){
					$(this).siblings().css({
						"transition":"all 0.3s ease-in-out",
						"height":"50px"
					})
				})
			
			
			})
		</script>
	</body>
</html>
